// Three.js 开发流程关系图交互脚本

class ThreeJSFlowChart {
    constructor() {
        this.currentStage = 0;
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.createProgressTracker();
        this.createSearchFunction();
        this.addInteractiveFeatures();
        this.startAnimations();
    }

    setupEventListeners() {
        // 阶段悬停效果
        document.querySelectorAll('.stage').forEach((stage, index) => {
            stage.addEventListener('mouseenter', () => this.highlightStage(stage, index));
            stage.addEventListener('mouseleave', () => this.unhighlightStage(stage));
        });

        // 键盘导航
        document.addEventListener('keydown', (e) => this.handleKeyNavigation(e));
    }

    createProgressTracker() {
        // 进度跟踪器功能已移除
        return;
    }

    createSearchFunction() {
        const searchContainer = document.createElement('div');
        searchContainer.className = 'search-container';
        searchContainer.innerHTML = `
            <div class="search-box">
                <input type="text" placeholder="🔍 搜索开发步骤..." class="search-input">
                <div class="search-results"></div>
            </div>
        `;

        // 搜索样式
        const searchStyles = `
            .search-container {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 15px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(10px);
            }
            .search-input {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #ecf0f1;
                border-radius: 8px;
                font-size: 1rem;
                transition: border-color 0.3s ease;
            }
            .search-input:focus {
                outline: none;
                border-color: #667eea;
            }
            .search-results {
                margin-top: 10px;
                max-height: 200px;
                overflow-y: auto;
            }
            .search-result {
                padding: 8px 12px;
                background: #f8f9fa;
                border-radius: 6px;
                margin-bottom: 5px;
                cursor: pointer;
                transition: background 0.3s ease;
                font-size: 0.9rem;
            }
            .search-result:hover {
                background: #667eea;
                color: white;
            }
        `;

        const searchStyleSheet = document.createElement('style');
        searchStyleSheet.textContent = searchStyles;
        document.head.appendChild(searchStyleSheet);

        document.querySelector('.sidebar').prepend(searchContainer);

        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        const searchResults = document.querySelector('.search-results');

        searchInput.addEventListener('input', (e) => {
            const query = e.target.value.toLowerCase();
            this.performSearch(query, searchResults);
        });
    }

    performSearch(query, resultsContainer) {
        resultsContainer.innerHTML = '';
        
        if (query.length < 2) return;

        const allSteps = document.querySelectorAll('.step');
        const matches = [];

        allSteps.forEach((step, index) => {
            const text = step.textContent.toLowerCase();
            if (text.includes(query)) {
                matches.push({ element: step, text: step.textContent, index });
            }
        });

        matches.forEach(match => {
            const resultDiv = document.createElement('div');
            resultDiv.className = 'search-result';
            resultDiv.textContent = match.text;
            resultDiv.addEventListener('click', () => {
                match.element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                this.highlightElement(match.element);
            });
            resultsContainer.appendChild(resultDiv);
        });

        if (matches.length === 0) {
            resultsContainer.innerHTML = '<div class="search-result">未找到匹配的步骤</div>';
        }
    }

    addInteractiveFeatures() {
        // 添加工具提示
        this.createTooltips();
        
        // 添加快捷操作按钮
        this.createQuickActions();
        
        // 添加主题切换
        this.createThemeToggle();
    }

    createTooltips() {
        // 工具提示功能已移除
        return;
    }

    createQuickActions() {
        // 快捷操作功能已移除
        return;
    }

    createThemeToggle() {
        const themeToggle = document.createElement('button');
        themeToggle.className = 'theme-toggle';
        themeToggle.innerHTML = '🌙';
        themeToggle.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            z-index: 1000;
        `;

        themeToggle.addEventListener('click', () => this.toggleTheme());
        document.body.appendChild(themeToggle);
    }



    highlightStage(stage, index) {
        stage.style.transform = 'translateY(-5px) scale(1.02)';
        stage.style.boxShadow = '0 20px 50px rgba(102, 126, 234, 0.2)';
    }

    unhighlightStage(stage) {
        stage.style.transform = '';
        stage.style.boxShadow = '';
    }

    highlightElement(element) {
        element.style.background = '#667eea';
        element.style.color = 'white';
        element.style.transform = 'scale(1.05)';
        
        setTimeout(() => {
            element.style.background = '';
            element.style.color = '';
            element.style.transform = '';
        }, 2000);
    }

    updateProgress() {
        // 进度更新功能已移除
        return;
    }

    handleQuickAction(action) {
        // 快捷操作处理功能已移除
        return;
    }

    exportProgress() {
        // 导出功能已移除
        return;
    }

    handleKeyNavigation(e) {
        const stages = document.querySelectorAll('.stage');
        
        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                this.currentStage = Math.min(this.currentStage + 1, stages.length - 1);
                stages[this.currentStage].scrollIntoView({ behavior: 'smooth' });
                break;
            case 'ArrowUp':
                e.preventDefault();
                this.currentStage = Math.max(this.currentStage - 1, 0);
                stages[this.currentStage].scrollIntoView({ behavior: 'smooth' });
                break;
        }
    }

    toggleTheme() {
        document.body.classList.toggle('dark-theme');
        const isDark = document.body.classList.contains('dark-theme');
        
        if (isDark) {
            document.body.style.background = 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)';
            document.querySelector('.theme-toggle').innerHTML = '☀️';
        } else {
            document.body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
            document.querySelector('.theme-toggle').innerHTML = '🌙';
        }
    }

    startAnimations() {
        // 完成步骤样式和进度加载功能已移除
        return;
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    new ThreeJSFlowChart();
    
    // 添加页面加载动画
    document.body.style.opacity = '0';
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.5s ease';
        document.body.style.opacity = '1';
    }, 100);
});

// 添加滚动进度指示器
window.addEventListener('scroll', () => {
    const scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
    
    let progressIndicator = document.querySelector('.scroll-progress');
    if (!progressIndicator) {
        progressIndicator = document.createElement('div');
        progressIndicator.className = 'scroll-progress';
        progressIndicator.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            z-index: 1000;
            transition: width 0.1s ease;
        `;
        document.body.appendChild(progressIndicator);
    }
    
    progressIndicator.style.width = scrolled + '%';
});